// 一.商品
// 商品网格容器样式 - 使用更强的选择器优先级
.products-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0.2rem; // 20px -> 0.2rem
  max-width: 12rem; // 1200px -> 12rem
  margin: 0 auto;
  width: 100%;
}

// 商品卡片样式
.product-card {
  background: white; // 白色背景
  border-radius: 0.08rem; // 8px -> 0.08rem
  box-shadow: 0 0.02rem 0.08rem rgba(0, 0, 0, 0.1); // 2px 8px -> 0.02rem 0.08rem
  padding: 0.15rem; // 15px -> 0.15rem
  transition: transform 0.2s ease; // 悬停动画
  width: 47%; // 保持百分比宽度

  &:hover {
    transform: translateY(-0.05rem); // 5px -> 0.05rem
    box-shadow: 0 0.04rem 0.16rem rgba(0, 0, 0, 0.15); // 4px 16px -> 0.04rem 0.16rem
  }
}

// 商品图片样式
.product-image {
  width: 100%; // 图片宽度占满容器
  height: 2rem; // 200px -> 2rem
  object-fit: cover; // 保持图片比例
  border-radius: 0.06rem; // 6px -> 0.06rem
  margin-bottom: 0.1rem; // 10px -> 0.1rem
}

// 商品标题样式
.product-card h4 {
  margin: 0.1rem 0; // 10px -> 0.1rem
  font-size: 0.16rem; // 16px -> 0.16rem
  color: #333; // 文字颜色
}

// 商品价格样式
.product-card p {
  margin: 0.05rem 0; // 5px -> 0.05rem
  font-size: 0.18rem; // 18px -> 0.18rem
  font-weight: bold; // 粗体
  color: #e74c3c; // 红色价格
}

.product-info {
  cursor: pointer;
}

// 二.搜索
// 搜索框外层容器样式
.home-search-bar {
  display: flex; // 横向排列
  align-items: center; // 垂直居中
  background: #fff7e6; // 浅黄色背景
  border-radius: 1rem; // 圆角
  padding: 0.08rem 0.16rem; // 内边距
  margin: 0.16rem auto 0.16rem auto; // 上下外边距
  width: 90%; // 宽度自适应
  box-shadow: 0 0.02rem 0.08rem rgba(0,0,0,0.05); // 轻微阴影
  position: relative; // 方便后续定位
}

// 搜索图标样式
.home-search-bar .search-icon {
  font-size: 1.2em; // 图标大小
  color: #ccc; // 图标颜色
  margin-right: 0.12rem; // 右侧间距
}

// 输入框样式
.home-search-bar .search-input {
  flex: 1; // 占据剩余空间
  border: none; // 无边框
  background: transparent; // 透明背景
  outline: none; // 无选中边框
  font-size: 1em; // 字体大小
  color: #333; // 字体颜色
}

// 相机图标样式
.home-search-bar .camera-icon {
  font-size: 1.2em; // 图标大小
  color: #ccc; // 图标颜色
  margin-left: 0.12rem; // 左侧间距
  cursor: pointer; // 鼠标悬浮为手型
}

.home-title{
  font-size: 0.2rem;
  font-weight: bold;
  padding-left: 0.2rem;
}

// 响应式设计 - 在中等屏幕上改为两列
@media (min-width: 768px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr); // 两列显示
    gap: 0.2rem; // 20px -> 0.2rem
    padding: 0.2rem; // 20px -> 0.2rem
  }

  .product-image {
    
  }
}

// 响应式设计 - 在小屏幕上改为单列
@media (max-width: 768px) {
  .products-grid {
    grid-template-columns: 1fr !important; // 单列显示
    gap: 0.15rem; // 15px -> 0.15rem
    padding: 0.15rem; // 15px -> 0.15rem
  }

  .product-image {
    height: 1.5rem; // 150px -> 1.5rem
  }
}